<template>
  <fragment>
    <el-popover ref="popover" :placement="placement" :title="title" :popper-options="{'zIndex': zIndex}" :width="width"
                trigger="click">
      <slot></slot>
    </el-popover>
    <el-button ref="btn" size="small" :type="type" :icon="icon" :title="title" v-popover:popover>{{ name }}</el-button>
  </fragment>
</template>
<script>
/* eslint-disable */
/**
 * 气泡按钮
 *
 * 实现的方式很多种，这种写法不会影响界面布局，对于后续编程会更加友好一些
 */
export default {
    name: "SeaPopoverButton"
    , props: {
        // 气泡弹窗标题
        title: {type: String, default: ''},
        // 气泡层级，需要保证悬浮与最上层
        zIndex: {type: Number, default: 20000},
        // 气泡宽度
        width: {type: Number, default: 200},
        // 气泡悬浮的位置，默认靠下方左对齐
        placement: {type: String, default: 'bottom-end'},
        // 按钮名称
        name: {type: String, default: 'click'},
        // 按钮图标
        icon: {type: String, default: undefined},
        // 按钮按钮样式，参考 button 的设计
        type: {type: String, default: undefined}
    },
    methods: {
        /**
         * 没有什么好的方式主动关闭弹窗，可以通过调用点击事件的方式实现
         */
        click: function () {
            this.$refs.btn.$el.click();
        }
    }
}
</script>
